<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#div{
			width: 100px;
			height: 100px;
			background: skyblue;
			/*实线*/
			border-style:solid;
			/*虚线*/
			border-style: dashed;
			/*点线*/
			border-style: dotted;
			/*双线*/
			border-style: double;
			/*边框的宽度*/
			border-width: 5px;
			/*边框颜色*/
			border-color: #ff0000;
			/*border缩写写法：border-width,border-style,border-color*/
			border: 10px dashed #ff6600;
			/*分别设置border四条边的样式*/
			border-top: 8px dashed #000;
			
			border-left: 8px groove yellowgreen;
			
			border-right: 8px ridge deeppink;
			
			border-bottom: 8px outset orange;
			
			border-radius: 50px;
			/*左上 右上 右下 左下*/
			border-radius: 8px 50% 50% 50% ;
			
			
			/*border-image原理：九宫格  图片要求 ：长宽是3的倍数
			 
			 27px 针对的是原图，然后到容器进行拉伸或其他的平铺方式。
			 
			 实际渲染根据边框的宽度。
			 
			 
			 
			 注意缩写形式border-width不带px...
			 
			 
			 * */
			
		
			/*border-image: url(img/border.png) 27 27 stretch;*/
			
			/*border-image: url(img/border.png) 27 27 repeat;*/
			
			border-image: url(img/border.png);
			/*切割border-image*/
			border-image-slice: 30 30;
			/*扩展border-image*/
			/*border-image-outset: 100px 100px;*/
			
			
			/*
			 
			 * 	background
			 * 
			 * 
			 * */
			width: 300px;
			
			height: 300px;
			
			
			background-image: url(img/drag.png);
			/*背景色*/
			background-color: skyblue;
			/*背景重复模式
			 	no-repeat  不重复
			 	repeat-x   横向重复
			 	repeat-y   纵向重复
			 	round      优雅平铺
			 	space      根据容器空间进行平铺
			 * */
			background-repeat: no-repeat;
			/*
			 * 背景位置
			 * center 容器的中点
			 * 数字：相对父容器的位置
			 * 
			 *父容器的左上角相对于背景图片的左上角的位置
			 * */
			background-position: center;
			background-position: 50%;
			
			
			/*
			 	border-box 从border开始
			 	
			 	content-box 从centent开始
			 	
			 	padding-box 从padding开始
			 * */
			background-origin: border-box;
			
			
			/*-webkit-text-fill-color: transparent;	*/	
			/*
			 background-clip 切割背景
			 
			 
			 * */
			color: transparent;
			-webkit-background-clip: text;
			font-size:200px;
			
			
			
		}
		
		.test{
			width: 0;
			/*height: 100px;*/
			/*background-color: skyblue;*/
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			border-top: 50px solid transparent;
			border-bottom: 50px solid deeppink;
		}
	</style>
	<body>
		<div id="div">lorem</div>
		<div class="test"></div>
	</body>
</html>
